<template>
    <div>
      <canvas ref="canvasRef"></canvas>
    </div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted, ref } from 'vue'
  import jm_draw from './canvas_draw.js'
  
  // 定义canvas组件的ref
  const canvasRef = ref(null)
  let ctx = null
  let isDragging = false
  let lastX = 0
  let lastY = 0
  let scale = 1


  // 初始化绘制板
  function initData() {
    const canvas = canvasRef.value
    ctx = canvas.getContext('2d')

    jm_draw.init_draw({
      cvs: canvas,
      ctx: ctx,
      data: {}
    })
    // canvas.width = 900
    // canvas.height = 400
    // canvas.addEventListener('mousedown', handleMouseDown)
    // canvas.addEventListener('mousemove', handleMouseMove)
    // canvas.addEventListener('mouseup', handleMouseUp)
    // canvas.addEventListener('wheel', handleWheel)
    // new jm_draw.init_draw(canvas, ctx, {})
    // jm_draw.graph_draw({
    //   canvas: canvas,
    //   ctx: ctx,
    //   data: {}
    // })
  }
  // 提交绘制板数据
  function submitData() {

  }
  // 离开绘制板事件
  function leaveView() {
    const canvas = canvasRef.value;
    // canvas.removeEventListener('mousedown', handleMouseDown)
    // canvas.removeEventListener('mousemove', handleMouseMove)
    // canvas.removeEventListener('mouseup', handleMouseUp)
    // canvas.removeEventListener('wheel', handleWheel)
  }

  defineExpose({
    initData,
    leaveView,
    submitData
  })
  </script>